<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Student Teacher Module</title>
    <link rel="stylesheet" href="../header-footer/common.css">
    <link rel="stylesheet" href="account-styles.css">
     <link rel="stylesheet" href="teacher-setting.css">

    <link rel="shortcut icon" href="../header-footer/images/ico.jpg" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <link rel="stylesheet" href="account-styles.css">
</head>

<body>
   <!-- 页眉 -->
    <header class="navbar">
        <div class="nav">
            <div class="logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <nav>
                <ul>
                    <!-- TODO 补充链接 -->
                    <li><a href="../Homepage/WebsiteHomepage.html">home page</a></li>
                    <li><a href="../Homepage/courseList.html">course</a></li>
                    <li><a href="../Homepage/league.html">Alliance colleges</a></li>
                    <li><a href="../Homepage/about-us.html">About Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="search-box">
            <input type="text" id="searchInput" placeholder="Search for ">
            <button type="button" id="searchButton"><i class="fas fa-search"></i></button>
        </div>
        <div class="info">
            <!-- TODO 补充链接 -->
        </div>
    </header>
    <!-- 主体内容 -->
    <!-- 主体内容（仅保留个人信息部分） -->
    <div class="profile-container">
        <div class="tabs-content">
            <div class="tab-switcher" style="margin-bottom: 30px;">
                <button id="tab-teacher" class="tab-btn active" style="padding:10px 20px; font-weight:600; border:none; border-bottom:3px solid #0066cc; background:#e6f0ff; cursor:pointer;">Personal Information</button>
            </div>

            <!-- 老师个人信息修改区域 -->
            <section id="teacher-section">
                <h2>Modify personal information</h2>
                <form id="teacher-info-form">
                    <div class="form-group">
                        <label for="teacher-username">Username (Account):</label>
                        <input type="text" id="teacher-username" name="username" disabled>
                    </div>
                    <div class="form-group">
                        <label>Gender:</label>
                        <div class="gender-group">
                            <label><input type="radio" name="gender" value="男"> male</label>
                            <label><input type="radio" name="gender" value="女"> female</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="teacher-phone">cell-phone number:</label>
                        <input type="tel" id="teacher-phone" name="phone" placeholder="请输入手机号">
                    </div>
                    <div class="form-group">
                        <label for="teacher-email">Email:</label>
                        <input type="email" id="teacher-email" name="email" placeholder="请输入邮箱">
                    </div>
                    <button type="submit">Save modifications</button>
                </form>
            </section>
        </div>
    </div>

   <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">
                <a href="../Homepage/WebsiteHomepage.html"><img src="../header-footer/images/logo.jpg" alt="AceHub"></a>
            </div>
            <div class="footer-text">
                <nav class="footer-nav">
                    <ul>
                        <li><a href="../Homepage/about-us.html">About Us</a></li>
                        <li><a href="../Homepage/contact.html">Contact Us</a></li>
                        <li><a href="../Homepage/privacy.html">Privacy Policy</a></li>
                        <li><a href="../Homepage/terms.html">Term of service</a></li>
                    </ul>
                </nav>
                <div class="footer-info">
                    <p>&copy; 2025 AceHub reserves all rights</p>
                </div>
            </div>
        </div>
    </footer>
    <script src="../database.js"></script>
    <script src="account.js"></script>

   <script>
        window.onload = function () {
const userid = localStorage.getItem('token');
loadTeacherInfo();
if (userid) {
const user = JSON.parse(localStorage.getItem(userid));
let profileUrl = '', profileName = '', accountUrl = '';
if (userid === 'admin') {
profileUrl = '../account/admin-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/admin-profile.html';
} else if (userid === 'teacher') {
profileUrl = '../teacher/teacher-profile.html';
ProfileName='Personal Center';
accountUrl = '../account/teacher-setting.html';
} else {
profileUrl = '../student/student-profile.html';
ProfileName='My Learning';
accountUrl = '../account/student-setting.html';
}
document.querySelector('.info').innerHTML = `
                    <div id="user-menu-trigger" style="cursor: pointer;">
                        <img id="user-head" src="${user.avatar}" alt="用户头像" style="width: 40px; height: 40px; border-radius: 50%;">
                    </div>
                    <div class="card" id="user-dropdown">
                        <ul>
                            <li><a href="${profileUrl}">${profileName}</a></li>
                            <li><a href="${accountUrl}">Account Settings </a></li>
                            <li><a id="logout" href="#logout">Log Out</a></li>
                        </ul>
                    </div>
                `;

                document.getElementById('logout').addEventListener('click', () => {
                    localStorage.removeItem('token');
                    window.location.href = '../Homepage/WebsiteHomepage.html';
                });

                const userMenuTrigger = document.getElementById('user-menu-trigger');
                const userDropdown = document.getElementById('user-dropdown');

                document.addEventListener('click', function (e) {
                    if (userMenuTrigger.contains(e.target)) {
                        e.preventDefault();
                        userDropdown.style.display = userDropdown.style.display === 'block' ? 'none' : 'block';
                        userDropdown.style.opacity = userDropdown.style.display === 'block' ? '1' : '0';
                        userDropdown.style.transform = userDropdown.style.display === 'block' ? 'translateX(-50%) translateY(0)' : 'translateX(-50%) translateY(-10px)';
                        userDropdown.style.pointerEvents = userDropdown.style.display === 'block' ? 'auto' : 'none';
                    } else if (!userDropdown.contains(e.target)) {
                        userDropdown.style.display = 'none';
                        userDropdown.style.opacity = '0';
                        userDropdown.style.transform = 'translateX(-50%) translateY(-10px)';
                        userDropdown.style.pointerEvents = 'none';
                    }
                });
            } else {
                document.querySelector('.info').innerHTML = `
                    <a href="../account/login.html"><button class="login">log on</button></a>
                    <a href="../account/register.html"><button class="register">register</button></a>
                `;
            }
        };

        function loadTeacherInfo() {
            const teacher = JSON.parse(localStorage.getItem('teacher'));
            if (!teacher) return;
            document.getElementById('teacher-username').value = teacher.userid || '';
            document.querySelectorAll('input[name="gender"]').forEach(r => {
r.checked = (teacher.gender === r.value);
});
document.getElementById('teacher-phone').value = teacher.phone || '';
document.getElementById('teacher-email').value = teacher.email || '';
}
document.getElementById('teacher-info-form').addEventListener('submit', function (e) {
e.preventDefault();
const teacher = JSON.parse(localStorage.getItem('teacher')) || {};
teacher.gender = document.querySelector('input[name="gender"]:checked')? .value || '';
teacher.phone = document.getElementById('teacher-phone').value.trim();
teacher.email = document.getElementById('teacher-email').value.trim();
const phonePattern = /^1[3-9]\d{9}$/;
if (teacher.phone && !phonePattern.test(teacher.phone)) {
Alert ('Please enter a valid phone number');
return;
}
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (teacher.email && !emailPattern.test(teacher.email)) {
Alert ('Please enter a valid email address');
return;
}
localStorage.setItem('teacher', JSON.stringify(teacher));
Alert: Information saved successfully! ');
});
    </script>
<!-- 在你的主体部分末尾，或者 body 结束标签前 -->
<script src="student-management.js"></script>

</body>
</html>
